<template>
  <div class="header">
    <div class="header_content" :class="{magic:magice }">
      <div class="wrapper">
        <router-link class="home" to="/">
          <img class="logo-img" src="https://wj.qq.com/image/logo.png?v=@version" />
          <h1>腾讯问卷</h1>
        </router-link>
        <div class="nav">
          <ul class="nav-list">
            <li class="right"><router-link to="/create" class="nav-option">创造问卷</router-link></li>
            <li class="right"><router-link  to="/" class="nav-option">我的问卷</router-link></li>
            <li class="right"><router-link to="/" class="nav-option">回答小组</router-link></li>
            <li class="right"><router-link to="/" class="nav-option">调查资讯</router-link></li>
            <li class="right"><router-link to="/" class="nav-option">帮助中心</router-link></li>
          </ul>
        </div>
      </div>
      <div class="login"><a class="login-button" href="">登录</a></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    magice: {
      type: Boolean,
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  border-bottom: 1px solid #eaeaea;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
}
.header_content {
  box-sizing: border-box;
  width: 1000px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.wrapper {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.home {
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo-img {
  margin-right: 5px;
}
h1 {
  display: inline-block;
  font-size: 21px;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
a {
  color: #333;
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  color: #58a6e7;
}
.nav {
  display: flex;
  height: 60px;
  font-size: 17px;
}
.nav-list {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.nav-list .right {
  margin-left: 50px;
  text-align: center;
}
.right {
  position: relative;
}
.nav-option{
  font-size: 17px;
}
.nav-option:hover::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background-color: #58a6e7;
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
}
.login {
  height: 34px;
  background: #80c200;
  padding: 0 20px;
  border: 1px solid #80c200;
  border-radius: 5px;
  color: #fff;
}
.login:hover {
  background: #80c;
}
.login-button {
  color: #fff;
  line-height: 34px;
  font-size: 14px;
}
.login-button:hover {
  color: #fff;
}
.magic{
  width: 100%;
  margin:0;
}
.router-link-exact-active.router-link-active{
color: #58a6e7;
}
</style>
